<script setup>

const {menu} = defineProps({
  menu: {
    type: Object,
    required: true,
    default:{
      name:undefined,
      path:undefined,
      icon:undefined,
      children:[]
    }
  }
})
</script>

<template>
  <el-sub-menu v-if="menu.children.length !== 0" :index="menu.path === '' ? menu.id + '' : menu.path">
    <template #title>
      <el-icon>
        <Component :is="menu.icon ?? 'Menu'"></Component>
      </el-icon>
      <span>{{ menu.name }}</span>
    </template>
    <menu-item v-for="(child,index) in menu.children" :key="index" :menu="child"/>
  </el-sub-menu>
  <el-menu-item v-else :index="menu.path">
    <el-icon>
      <Component :is="menu.icon ?? 'Menu'"></Component>
    </el-icon>
    <template #title>{{ menu.name }}</template>
  </el-menu-item>
</template>

<style scoped lang="scss">

</style>